<template>
  <div class="p-5">
    <div>
      <el-button type="primary" @click="handleAddUser">新增属性</el-button>
    </div>
    <el-table :data="attrs" style="width: 100%" :border="true" class="mt-5">
      <el-table-column prop="attributeId" label="属性ID" align="center" />
      <el-table-column prop="attributeName" label="属性名称" align="center" />
      <el-table-column prop="attributeGroup" label="属性类别" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="warning" icon="Edit" title="修改属性信息" @click="handleEditUser(scope.row)">修改</el-button>
          <el-popconfirm :title="`你确定要删除属性吗`" width="200px" @confirm="deleteUser(scope.row.attributeId)">
            <template #reference>
              <el-button type="danger" icon="Delete" title="删除属性">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑用户对话框 -->
    <el-dialog :title="dialogType === 'add' ? '新增属性' : '编辑属性'" v-model="dialogVisible" width="30%" align-center>
      <template #default>
        <el-form label-width="120px">
          <el-form-item label="属性名称" prop="name">
            <el-input placeholder="请输入属性名称" v-model="formData.attributeName" />
          </el-form-item>
          <el-form-item label="请选择属性类型" prop="description">
            <el-radio-group v-model="formData.attributeGroup">
              <el-radio value="SPU">SPU属性</el-radio>
              <el-radio value="SKU">SKU属性</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="flex justify-end gap-2 px-4 pb-4">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { addAttrAPI, deleteAttrAPI, getAttrAPI, updateAttrAPI } from '@/apis/attr';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

const dialogVisible = ref(false)
const dialogType = ref('add'); // 'add' 或 'edit'
const attrs = ref([])
const formData = ref({
  attributeId: '',
  attributeName: '',
  attributeGroup: '',
})
const getAttrs = async () => {
  try {
    let res = await getAttrAPI()
    attrs.value = res.data
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}
// 新增属性
const handleAddUser = () => {
  dialogType.value = 'add';
  dialogVisible.value = true;
  formData.value = {
    attributeId: '',
    attributeName: '',
    attributeGroup: '',
  }
};
// 编辑属性
const handleEditUser = (attr) => {
  dialogType.value = 'edit';
  dialogVisible.value = true;
  formData.value = { ...attr };
};
const confirm = async () => {
  if (!formData.value.attributeId) {
    try {
      await addAttrAPI(formData.value)
      ElMessage.success('新增成功');
      getAttrs()
      dialogVisible.value = false;
    } catch (error) {
      console.log(error)
      ElMessage.error('新增失败');
      dialogVisible.value = false;
    }
  } else {
    try {
      await updateAttrAPI(formData.value)
      ElMessage.success('修改成功');
      getAttrs()
      dialogVisible.value = false;
    } catch (error) {
      ElMessage.success('修改失败');
      dialogVisible.value = false;
    }
  }
}
const deleteUser = async (id) => {
  try {
    await deleteAttrAPI(id)
    ElMessage.success('删除成功');
    getAttrs()
  } catch (error) {
    ElMessage.error('删除数据失败');
  }
}
onMounted(() => {
  getAttrs()
})
</script>

<style lang="scss" scoped></style>